<template>
    <div class="login-container">
      <h1 class="title">智慧打卡</h1>
      <div class="card">
        <form @submit.prevent="handleSubmit" class="form-section">
            <InputField
                v-model="form.username"
                label=""
                placeholder="请输入用户名"
                required
                @blur="v$.username.$touch()"
                :error-message="v$.username.$errors[0]?.$message"
                :error="v$.username.$errors[0]?.$message || false"
                
              />
              <InputField
                v-model="form.password"
                label=""
                type="password"
                placeholder="请输入密码"
                required
                 @blur="v$.password.$touch()"
                 :error-message="v$.password.$errors[0]?.$message"
                :error="v$.password.$errors[0]?.$message || false"
               
              />
            <div class="remember-me">
              <input type="checkbox" id="remember" v-model="rememberMe" />
              <label for="remember">记住账号密码</label>
            </div>
            <button type="submit" class="primary-btn">登录</button>
          <div class="divider">
            <span class="divider-text">或</span>
          </div>
  
          <div class="oauth-buttons">
            <button class="oauth-btn google">
              <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24px">
                <path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"/>
                <path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"/>
                <path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"/>
                <path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"/>
              </svg>
              Continue with Google
            </button>
            <button class="oauth-btn apple">
              <svg class="icon" viewBox="0 0 24 24" width="24px" fill="#000000">
                <path d="M18.71 19.5C17.88 20.74 17 21.95 15.66 21.97C14.32 22 13.89 21.18 12.37 21.18C10.84 21.18 10.37 21.95 9.09997 22C7.78997 22.05 6.79997 20.68 5.95997 19.47C4.24997 17 2.93997 12.45 4.69997 9.39C5.56997 7.87 7.12997 6.91 8.81997 6.88C10.1 6.86 11.32 7.75 12.11 7.75C12.89 7.75 14.37 6.68 15.92 6.84C16.57 6.87 18.39 7.1 19.56 8.82C19.47 8.88 17.39 10.1 17.41 12.63C17.44 15.65 20.06 16.66 20.09 16.67C20.06 16.74 19.67 18.11 18.71 19.5ZM13 3.5C13.73 2.67 14.94 2.04 15.94 2C16.07 3.17 15.6 4.35 14.9 5.19C14.21 6.04 13.07 6.7 11.95 6.61C11.8 5.46 12.36 4.26 13 3.5Z"/>
              </svg>
              Continue with Apple
            </button>
          </div>
  
          <p class="footer-text">没有账号？<Link href="/user/register" class="link">老实去注册</Link></p>
        </form>
      </div>
    </div>
  </template>
  
  <script setup>
  
  import { onMounted, ref } from 'vue';
  import { reactive, computed } from 'vue';
  import useVuelidate from '@vuelidate/core'
  import { required, alpha, minLength,  helpers } from '@vuelidate/validators'
  import { defineProps } from 'vue';
  import request from '@/utils/request';
  import apiUrls  from '@/config/apiUrls'; 
  import { router, Link  } from '@inertiajs/vue3'; 
  import {baseNotifyInfo} from '@/utils/utils.js';
  import {StatusCodeEnum} from '@/enum/StatusCodeEnum.js';
import RouterPath from '@/constans/RouterPath.js'

  // 接收larvel 后端数据
  const props = defineProps({
    // users: {
    //   type: Array,
    //   default: ()=>[]
    // }
  })
  const form = reactive({
    username: '',
    password: ''
  });

  const rememberMe = ref(false);

  const rules = {
    username: {
      required: helpers.withMessage('用户名不能为空', required),
      minLength: helpers.withMessage('至少3个字符', minLength(3)),
      alpha: helpers.withMessage('只能包含英文字母', helpers.regex(/^[a-zA-Z0-9]+$/))
    },
    password: {
      required: helpers.withMessage('密码不能为空', required),
      minLength: helpers.withMessage('至少6个字符', minLength(6))
    }
  };

  const v$ = useVuelidate(rules, form);

  // 从本地存储加载账号密码
  const loadSavedCredentials = () => {
    try {
      const savedUsername = localStorage.getItem('dawn_username');
      const savedPassword = localStorage.getItem('dawn_password');
      const hasRemembered = localStorage.getItem('dawn_remember_me');
      
      if (savedUsername && savedPassword && hasRemembered === 'true') {
        form.username = savedUsername;
        form.password = savedPassword;
        rememberMe.value = true;
      }
    } catch (e) {
      console.error('读取本地存储失败', e);
    }
  };

  // 保存账号密码到本地存储
  const saveCredentials = () => {
    try {
      if (rememberMe.value) {
        localStorage.setItem('dawn_username', form.username);
        localStorage.setItem('dawn_password', form.password);
        localStorage.setItem('dawn_remember_me', 'true');
      } else {
        localStorage.removeItem('dawn_username');
        localStorage.removeItem('dawn_password');
        localStorage.removeItem('dawn_remember_me');
      }
    } catch (e) {
      console.error('保存到本地存储失败', e);
    }
  };

  // 处理表单数据
  const handleSubmit = async () => {
    const isValid = await v$.value.$validate();
    if (!isValid) {
      console.log('提交登录失败:');
      return
    };
    console.log('提交登录:', form);
    loginUser()
  };

  /**
   * 用户登录
   */
  const loginUser = async () => {
    const response = await request.post(apiUrls.users.login, form, {
        headers: {
          'Content-Type': 'application/json'
        }
      });
      if(response.code === 200 ){
        // 登录成功时保存凭据
        saveCredentials();
        baseNotifyInfo({ title:"登录提示", content:response.message, type:1 })
        router.visit(RouterPath.users.home)
      }else{
        baseNotifyInfo({ title:"登录提示", content:response.message, type:2 })
      }
  };

  onMounted(() => {
    loadSavedCredentials();
  });

</script>
  
  <style scoped>
  .login-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background: #f8fafc;
  }
  
  .title {
    font-size: 2rem;
    color: #1e293b;
    margin: 3rem 0;
    font-weight: 600;
  }
  
  .card {
    background: white;
    padding: 2.5rem;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    width: 100%;
    max-width: 400px;
  }
  
  .input-group {
    margin-bottom: 1.5rem;
  }
  
  .modern-input {
    width: 100%;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: border-color 0.2s;
  }
  
  .modern-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 2px #e0e7ff;
  }
  
  .remember-me {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    user-select: none;
  }
  
  .remember-me input[type="checkbox"] {
    margin-right: 0.5rem;
    width: 18px;
    height: 18px;
  }
  
  .remember-me label {
    color: #4b5563;
    font-size: 0.9rem;
    cursor: pointer;
  }
  
  .primary-btn {
    width: 100%;
    padding: 1rem;
    background: #000000;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
  }
  
  .primary-btn:hover {
    background: #4338ca;
  }
  
  .divider {
    position: relative;
    margin: 2rem 0;
    height: 1px;
    background: #e2e8f0;
  }
  
  .divider-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 0 1rem;
    color: #64748b;
    font-size: 0.875rem;
  }
  
  .oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: white;
    cursor: pointer;
    transition: background 0.2s;
  }
  
  .oauth-btn:hover {
    background: #f8fafc;
  }
  
  .icon {
    height: 1.5rem;
    width: 1.5rem;
  }
  
  .footer-text {
    text-align: center;
    margin-top: 2rem;
    color: #64748b;
  }
  
  .link {
    color: #4f46e5;
    text-decoration: none;
    font-weight: 500;
  }
  
  .link:hover {
    text-decoration: underline;
  }


  .header {
  text-align: center;
  margin-bottom: 2rem;
}

.title {
  font-size: 2rem;
  color: #1e293b;
  margin-bottom: 1rem;
  font-weight: 600;
}

.subtitle {
  color: #000000;
  line-height: 1.5;
}

.subtitle p {
  margin: 0.25rem 0;
}
</style>